﻿@model IEnumerable<DietPlanning.Models.User>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<h2>User</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table table-bordered table-striped table-hover">
    <tr>
        <th>
            UserName
        </th>
        <th>
            Email
        </th>
        <th>
            Password
        </th>
        <th>
            Male
        </th>
        <th>
            Birthday
        </th>
        <th>
            Phone
        </th>
        <th>
            Height
        </th>
        <th>
            Weight
        </th>
        <th>
            Role
        </th>
        <th></th>
    </tr>

 @for (int i = 0; i < Model.Count(); i++)
    {
        DietPlanning.Models.User item = Model.ElementAt(i);

        if (i%2 == 0)
        {
            @:<tr class="error" id="item-@item.UserID">
        }
        else
        {
            @:<tr class="warning" id="item-@item.UserID">
        }
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Password)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Male)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Birthday)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Phone)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Height)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Weight)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Role)
        </td>
        <td>
           <a class="icon-edit" href="@Url.Action("Edit", new {id = item.UserID})"></a>                        
           <a class="icon-remove" href="#deletePrompt" data-toggle="modal" data-id="@item.UserID"></a>
        </td>
    @:</tr>
}

</table>

<!--Delete Prompt-->
<div id="deletePrompt" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h3>Delete User</h3>    
    </div>
    <div class="modal-body">
        <p>Do you want to delete this User?</p>        
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" onclick="okClicked();">Yes</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">No</button>        
    </div>
</div>

<script type="text/javascript"> 
    var id;
    $(document).ready(function() {
        
        $('.icon-remove').click(function() {
            id = $(this).attr('data-id');  
        });
    });
    function okClicked() {
        $.ajax({
            url: "@Url.Action("Delete")",
            data: { id: id },
            success: function(data) {
                $('#deletePrompt').modal('hide');
               
                var item = $('#item-' + id);
                item.hide();                
                item.nextAll('tr').each(function() {
                    var current = $(this);
                    if (current.hasClass('warning')) {
                        current.removeClass('warning');
                        current.addClass('error');
                    } else {
                        current.removeClass('error');
                        current.addClass('warning');
                    }
                });                 
            }
        });
    }
</script>
